<template>
    <div class="body">
      <div class="myAvatar" @click="toMyInfo">
        <el-avatar :size="50" :src="myUserInfo.avatar" ></el-avatar>
      </div>
      <div class="btns">
        <div>
        <el-button @click="showFirendList" class="abtn" circle>
          <i class="el-icon-user" style="font-size: 25px" ></i>
        </el-button>
          <span class="hidden-md-and-down">好友列表</span>
        </div>
        <div>
          <el-button @click="showMessageList" class="abtn" circle>
            <i class="el-icon-chat-dot-square" style="font-size: 25px" ></i>
          </el-button>
          <span class="hidden-md-and-down">消息列表</span>
        </div>
        <div>
          <el-button @click="addFriend" class="abtn" circle>
            <i class="el-icon-zoom-in" style="font-size: 25px" ></i>
          </el-button>
          <span class="hidden-md-and-down">添加好友</span>
        </div>
      </div>
    </div>
</template>

<script>
  import 'element-ui/lib/theme-chalk/display.css'
  export default {
    name: 'SideOptions',
    data(){
      return{
        myUserInfo: JSON.parse(window.localStorage.userInfo)
      }
    },
    methods: {
      // 查看好友列表
      showFirendList(){
        console.log("click")
        this.$emit('changeListContain', 0)
      },
      showMessageList(){
        this.$emit('changeListContain', 1)

      },
      addFriend(){
        this.$emit('changeCardContain', 3)
      },
      toMyInfo(){
        console.log('打开我的info')
        this.$emit('toMyInfo')
      }
    }
  }
</script>

<style scoped>
  .body{
    background-color: #534e44;
    /*background-image: linear-gradient(#02C39A, #00A896, #028090);*/
    height: 100%;
    color: white;
  }
  .btns{
    padding-top: 50%;
    /*transform: translateY(-50%);*/
    margin: auto;
  }
  .myAvatar{
    margin: auto;
    padding-top: 20px;
    top:10px;
  }
  .abtn{
    margin-top: 20%;
  }
</style>
